<!---->
<template>
    <div class="page_companyDetail">
        <common-header :title="'企业详细信息'" :showBack="true"></common-header>
        <div class="pages-main" style="height: calc( 100vh - 45px)">
            <div style="margin: 5px 0;" v-if="enterInfo">
                <img v-for="(item,index) in picurl1" :src="item.fileurl"
                     @click="showPreviewPicVisible(item.fileurl,index)"
                     style="height: 4rem;width: 3rem;padding-top: 0.15rem;margin-left: 8px;"/>
                <div v-if="picurl1.length < 6" style="display: inline-block;">
                    <upload-Picture @pictureUrlList="setUrlList"
                                    :limit="6"></upload-Picture>
                </div>
            </div>
            <tab>
                <tab-item selected @on-item-click="onItemClick">必填项</tab-item>
                <tab-item @on-item-click="onItemClick">选填项</tab-item>
            </tab>

            <div v-show="isMustFill">
                <div class="every-info">
                    <div class="info-title">
                        <div class=" every-block-padding">
                            <img src="../../../static/images/edit.png" alt="" @click="goDetail('requiredDetail')"/>
                            <div class="title-text translateBlock">基本信息(必填项)</div>

                            <img v-if="isOpenBaseInfoChildren" src="../../../static/images/down-arrow.png"
                                 @click="isOpenBaseInfoChildren = !isOpenBaseInfoChildren"/>
                            <img v-else src="../../../static/images/up-arrow.png"
                                 @click="isOpenBaseInfoChildren = !isOpenBaseInfoChildren"/>
                        </div>
                    </div>
                    <div class="item-info" v-show="isOpenBaseInfoChildren">
                        <div class="item-item every-block-padding">
                            <span class="item-itemLabel">企业名</span>
                            <span class="translateBlock" style="width: 7.83rem;text-align: right;line-height: 0.5rem;">
                                {{enterInfo.name}}
                            </span>
                        </div>
                        <div class="item-item every-block-padding">
                            <span class="item-itemLabel">注册资金（万元）</span>
                            <span class="float-right">{{enterInfo.registeredcapital}}</span>
                        </div>
                        <div class="item-item every-block-padding">
                            <span class="item-itemLabel">社会信用代码</span>
                            <span class="float-right">{{enterInfo.criditecode}}</span>
                        </div>
                        <div class="item-item every-block-padding">
                            <span class="item-itemLabel">法人姓名</span>
                            <span class="float-right">{{enterInfo.legalname}}</span>
                        </div>
                        <div class="item-item every-block-padding">
                            <span class="item-itemLabel">法人身份证</span>
                            <span class="float-right">{{enterInfo.legalidnumber}}</span>
                        </div>
                        <div class="item-item every-block-padding">
                            <span class="item-itemLabel">联系方式</span>
                            <span class="float-right">{{enterInfo.contactphone}}</span>
                        </div>
                        <div class="item-item every-block-padding">
                            <span class="item-itemLabel">经纬度</span>
                            <span class="float-right">{{enterInfo.lat}} ， {{enterInfo.lon}}</span>
                        </div>
                        <div class="item-item every-block-padding">
                            <span class="item-itemLabel">具体地址</span>
                            <span class="translateBlock" style="width: 7.4rem;text-align: right;line-height: 0.5rem;">
                                {{enterInfo.location}}
                            </span>
                        </div>
                        <div class="item-item every-block-padding">
                            <span class="item-itemLabel">成立时间</span>
                            <span class="float-right">{{establishtime}}</span>
                        </div>
                        <div class="item-item every-block-padding">
                            <span class="item-itemLabel">所属行业</span>
                            <span class="translateBlock" style="width: 7.2rem;text-align: right;line-height: 0.5rem;">
                                {{enterInfo.categoryText}}
                            </span>
                        </div>
                        <div class="item-item every-block-padding">
                            <span class="item-itemLabel">主营业务</span>
                            <span class="translateBlock" style="width: 7.2rem;text-align: right;line-height: 0.5rem;">
                                {{enterInfo.maincamp}}
                            </span>
                        </div>
                    </div>
                </div>

                <div class="every-info">
                    <div class="info-title">
                        <div class=" every-block-padding">
                            <!--@click="goDetail(index)"-->
                            <img src="../../../static/images/icon-add.png"
                                 @click="$tools.goPage_query('addproduct',{enterpriseid:id})" alt=""/>
                            <div class="title-text translateBlock">产品情况</div>

                            <img v-if="isOpenProjectInfoChildren" src="../../../static/images/down-arrow.png"
                                 @click="isOpenProjectInfoChildren = !isOpenProjectInfoChildren"/>
                            <img v-else src="../../../static/images/up-arrow.png"
                                 @click="isOpenProjectInfoChildren = !isOpenProjectInfoChildren"/>
                        </div>
                    </div>
                    <div class="item-info" v-show="isOpenProjectInfoChildren">
                        <div v-if="enterInfo.products" v-for="(item,index) in enterInfo.products">
                            <div class="item-item every-block-padding ">
                                <div>
                                    <div class="translateBlock">
                                        <span class="item-itemLabel">产品名称：</span>
                                        <span> {{item.name}}</span>
                                    </div>
                                    <div class="translateBlock float-right">
                                        <span class="item-itemLabel">产量：</span>
                                        <span>{{item.yield}}{{item.unitTypeText}}</span>
                                    </div>
                                </div>
                                <div>
                                    <div class="translateBlock">
                                        <span class="item-itemLabel">产值：</span>
                                        <span>{{item.outputvalue}}万元</span>
                                    </div>
                                    <div class="translateBlock float-right">
                                        <span class="item-itemLabel">销售：</span>
                                        <span>{{item.sale}}{{item.saleTypeText}}</span>
                                    </div>
                                </div>
                                <div class="item-btns every-block-padding">
                                    <div class="translateBlock item-btn"
                                         @click="$tools.goPage_query('addproduct',{productid:item.id,enterpriseid:item.enterpriseId})">
                                        <img src="../../../static/images/bj_03.png" alt="" width="16"/>
                                        编辑
                                    </div>
                                    <div class="translateBlock" @click="deleteProject(item.id)">
                                        <img src="../../../static/images/del_03.png" alt="" width="16"/>
                                        删除
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>

            <div v-show="!isMustFill">
                <div class="every-info">
                    <div class="info-title">
                        <div class=" every-block-padding">
                            <img src="../../../static/images/edit.png" @click="goDetail('optionDetail')" alt=""/>
                            <div class="title-text translateBlock">基本信息(选填)</div>
                            <img v-if="isOpenBaseInfoChildren1" src="../../../static/images/down-arrow.png"
                                 @click="isOpenBaseInfoChildren1 = !isOpenBaseInfoChildren1"/>
                            <img v-else src="../../../static/images/up-arrow.png"
                                 @click="isOpenBaseInfoChildren1 = !isOpenBaseInfoChildren1"/>
                        </div>
                    </div>
                    <div class="item-info" v-show="isOpenBaseInfoChildren1">
                        <div class="item-item every-block-padding">
                            <span class="item-itemLabel">税务登记号</span>
                            <span class="float-right">{{enterInfo.taxpayercode}}</span>
                        </div>
                        <div class="item-item every-block-padding">
                            <span class="item-itemLabel">生产厂址</span>
                            <span class="translateBlock" style="width: 7.2rem;text-align: right;line-height: 0.5rem;">
                                {{enterInfo.productsite}}
                            </span>
                        </div>
                        <div class="item-item every-block-padding">
                            <span class="item-itemLabel">邮政编码</span>
                            <span class="float-right">{{enterInfo.postalcode}}</span>
                        </div>
                        <div class="item-item every-block-padding">
                            <span class="item-itemLabel">传真号码</span>
                            <span class="float-right">{{enterInfo.faxnumber}}</span>
                        </div>
                        <div class="item-item every-block-padding">
                            <span class="item-itemLabel">企业网址</span>
                            <span class="float-right">{{enterInfo.enterpriseurl}}</span>
                        </div>
                        <div class="item-item every-block-padding">
                            <span class="item-itemLabel">企业邮箱</span>
                            <span class="float-right">{{enterInfo.enterpriseemail}}</span>
                        </div>
                        <div class="item-item every-block-padding">
                            <span class="item-itemLabel">员工总人数</span>
                            <span class="float-right">{{enterInfo.totalstaff}}</span>
                        </div>
                        <div class="item-item every-block-padding">
                            <span class="item-itemLabel">本地员工人数</span>
                            <span class="float-right">{{enterInfo.localstaff}}</span>
                        </div>
                        <div class="item-item every-block-padding">
                            <span class="item-itemLabel">资金补贴（万元）</span>
                            <span class="float-right">{{enterInfo.fundsubsidy}}</span>
                        </div>
                        <div class="item-item every-block-padding">
                            <span class="item-itemLabel">补贴已使用（万元）</span>
                            <span class="float-right">{{enterInfo.usefundsubsidy}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div v-transfer-dom>
            <confirm v-model="isShowDeleteDialog"
                     :title="'确认删除框'"
                     @on-cancel="onCancel"
                     @on-confirm="onConfirm">
                <p style="text-align:center;">您确定要删除该数据吗？</p>
            </confirm>
        </div>

        <div v-transfer-dom>
            <popup v-model="showPreviewPic" height="100%">
                <div class="popup1">
                    <img :src="previewUrl"
                         style="width: 100%;position: absolute;top: 50%; transform: translateY(-50%);"/>
                    <div style="position: absolute;left:50%;transform: translateX(-50%);bottom: 20px;height:60px; width: 5rem;text-align: center;"
                         @click="deleteCoverPicture">
                        <img src="../../../static/images/del_03.png" alt=""/>
                    </div>
                </div>
            </popup>
        </div>

    </div>
</template>

<script>
    import {Tab, TabItem, Group, Cell, TransferDom, Popup} from 'vux'
    import company from '../../services/company'
    import uploadPicture from '../../components/uploadPicture';

    export default {
        name: "companyDetail",
        components: {
            Tab,
            TabItem,
            uploadPicture,
            TransferDom,
            Popup,
            Group, Cell,
        },
        data() {
            return {
                isShowDeleteDialog: false,
                id: this.$route.query.id,
                isMustFill: true,
                isOpenBaseInfoChildren: true,
                isOpenBaseInfoChildren1: true,
                isOpenProjectInfoChildren: false,
                showPreviewPic: false,
                projectId: '',
                pictureUrlList: [],
                previewUrl: '',
                establishtime: '',
                previewIndex: 0,
                picurl1: [],
                enterInfo: {
                    name: '',
                    registeredcapital: '',
                    criditecode: '',
                    contactuser: '',
                    legalidnumber: '',
                    contactphone: '',
                    lat: '',
                    lon: '',
                    location: '',
                    establishtime: '',
                    categoryText: '',
                    maincamp: '',
                    products: [],
                    taxpayercode: '',
                    productsite: '',
                    postalcode: '',
                    faxnumber: '',
                    enterpriseurl: '',
                    enterpriseemail: '',
                    totalstaff: '',
                    localstaff: '',
                    fundsubsidy: '',
                    usefundsubsidy: '',
                    legalname: '',
                    cover: '',
                    picurl: [],
                }
            }
        },

        created() {

        },
        mounted() {
            this.getDetail()
        },
        watch: {},
        methods: {

            // 获取企业详情
            getDetail() {
                this.$store.dispatch('changeImgList', [])
                let _param = this.$tools.invokeUAF('enterprise/detail', {
                    id: this.id,
                })
                company.getEnterpriseDetail(_param).then(res => {
                    let data = res.data.data;
                    this.enterInfo = data;
                    this.establishtime = this.$tools.formateChooseTime(this.enterInfo.establishtime);
                    let imgList = [];
                    this.picurl1 = data.picurl;
                    this.enterInfo.picurl.forEach(item => {
                        imgList.push({fileurl: item.fileurl})
                    })
                    this.$store.dispatch('changeImgList', imgList)
                })
            },

            onItemClick(index) {
                this.isMustFill = !index ? true : false;
            },

            // 跳转到编辑页面
            goDetail(name) {
                this.$tools.goPage_query(name, {id: this.id})
            },

            //删除
            deleteProject(id) {
                this.isShowDeleteDialog = true;
                this.projectId = id;
            },

            showPreviewPicVisible(fileurl, index) {
                this.showPreviewPic = true;
                this.previewUrl = fileurl;
                this.previewIndex = index;
            },

            // 删除图片
            deleteCoverPicture() {
                this.picurl1.splice(this.previewIndex, 1)
                this.showPreviewPic = false;
                this.$store.dispatch('changeImgList', this.picurl1)
                this.saveInfo()
            },

            // 保存企业信息
            saveInfo() {
                let url = '';
                if (this.picurl1.length) {
                    this.picurl1.forEach(item => {
                        url = url ? url + ',' + item.fileurl : item.fileurl
                    })
                }
                this.enterInfo.picurl = url;
                let _param = this.$tools.invokeUAF('enterprise/getEnterpriseModify', {})
                company.getEnterpriseModify(_param, this.enterInfo).then(res => {
                    // this.getDetail();
                    this.picurl1 = this.$store.state.user.imgList;
                })
            },

            // 确定删除
            onConfirm() {
                let _param = this.$tools.invokeUAF('enterprise/delProduct', {
                    productid: this.projectId,
                })
                company.delProduct(_param).then(res => {
                    this.getDetail()
                })
            },
            onCancel() {
                this.isShowDeleteDialog = false;
            },

            setUrlList(ref) {
                this.picurl1 = ref;
                this.saveInfo()
            },

            // 检测屏幕高度变化
            inputType() {

                if (!this.timer) {
                    this.timer = true
                    let that = this
                    setTimeout(() => {
                        if (that.docmHeight > that.showHeight) {
                            //显示class
                            this.hideClass = true;
                        } else if (that.docmHeight <= that.showHeight) {
                            //显示隐藏
                            this.hideClass = false;
                        }
                        that.timer = false;
                    }, 10)
                }

            },

            onBlurInput() {
                this.hideClass = false;
                window.scroll(0, 0)
            },
        },
    };
</script>

<style lang="less" rel="stylesheet/less" type="text/less">
    .page_companyDetail {
        .every-info {
            .info-title {
                height: 1rem;
                line-height: 1rem;
                border-bottom: 1px solid #f4f4f4;
                margin-top: 10px;
                background-color: #fff;

                img {
                    width: .5rem;
                    vertical-align: middle;
                }

                .title-text {
                    width: 85%;
                    text-align: center;
                }
            }

        }
    }

</style>
